<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css伪类和伪元素</title>
</head>
<style>
    /* 链接以不同方式显示顺序：爱与恨 lvha 即:link,visited,hover,active */
    /* 未访问的链接 */
    a:link {
        color: green;
    }

    /* 已访问的链接 */
    a:visited {
        color: red;
    }

    /* 鼠标悬停链接 */
    a:hover {
        color: blue;
    }

    /* 已选择的链接 */
    a:active {
        color: orange;
    }

    /* last-child:选择其父元素的最后一个子元素 */
    h1:last-child {
        color: orangered;
    }

    /* p:first-child:选择其父元素的第一个子元素且为p标签,如果第一个有别的标签不是p标签则不会匹配到 */
    p:first-child {
        color: pink;
    }

    /* first-of-type:选择作为其父的首个 <p> 元素的每个 <p> 元素。 */
    p:first-of-type {
        color: pink;
    }

    /* last-of-type:选择作为其父的最后一个 <p> 元素的每个 <p> 元素。 */
    h2:last-of-type {
        color: #bfa;
    }

    /* :not():非选择器 */
    :not(p) {
        background-color: skyblue;
    }

    /* 
        css所有的伪元素: p::after:在每个元素之后插入内容;p::before:在每个 <p> 元素之前插入内容;
                        p::first-letter:在每个p元素的首字母加上样式;p::first-line:选择每个 <p> 元素的首行，并为其设置样式;
                        p::selection:候选被选中的文本并设置样式
    */
</style>

<body>
    <h1>CSS 链接</h1>
    <!-- <p><b><a href="#">这是一个链接</a></b></p>
    <p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后才能生效。</p>
    <p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后才能生效。</p> -->
    <div>
        <p>11</p>
        <p>22</p>
        <p>33</p>
    </div>

    <hr>
    <div>
        <h1>标题1</h1>
        <h1>标题2</h1>
        <h1>标题3</h1>
        <h1>标题4</h1>
    </div>

    <div>
        <h1>我是一个h1</h1>
        <p>222</p>
        <p>2</p>
        <p>3</p>
        <h2>我是h2</h2>
    </div>


</body>

</html>